<template>
  <div class="dev-panel-page com-full">
    <div id="dev1" class="dev-info">
      <DevInfo />
    </div>
    <div class="Dev-frame com-flex-c">
      <Card :name="name">
        <template #body>
          <div class="com-flex-c com-center com-full">
            <div class="frame com-flex-c">
              <div
                class="com-full Ranking com-flex-c"
                v-for="(item, index) in list"
                :key="index"
              >
                <div class="com-flex-r">
                  <div :class="['com-center top-frame', { active_top: index > 2 }]">
                    Top.{{ index + 1 }}
                  </div>
                  <div class="com-flex-1 com-flex-r top-name">
                    <div class="name">{{ item.addressName }}</div>
                    <div class="num">总耗能：{{ item.totalEnergy }}（kw）</div>
                  </div>
                </div>
                <div class="line-frame com-flex-r">
                  <div
                    :class="['Top-line', { active_line: index > 2 }]"
                    :style="{
                      width: `${percent(item.totalEnergy, item.IitEnergyT)}%`,
                    }"
                  ></div>
                  <div class="dian"></div>
                </div>
                <div class="com-flex-r pue-IT">
                  <span class="PIname">小时PUE：{{ item.pue }}</span>
                  <span class="PIname">IT能耗：{{ item.itEnergy }}（kw）</span>
                </div>
              </div>
            </div>
          </div>
        </template>
      </Card>
    </div>
  </div>
</template>

<script setup>
import DevInfo from "./components/DevInfo/DevInfo.vue";
import Card from "@/components/Card/Card.vue";
import { onMounted, ref, computed, watch } from "vue";
import bus from "@/utils/bus.js";
import api from "@/api";
import { useParamsStore } from "@/stores/params.js";

const paramsStore = useParamsStore();
const param = computed(() => paramsStore.param);
const name = "机房PUE(小时)TOP5";
const list = ref([]);

//计算百分比
const percent = (all, num) => {
  const per = (num / all) * 100;
  return Math.floor(per);
};

const dataInit = async () => {
  const { data } = await api.pueTop5(param.value);
  list.value = data;
};
document.addEventListener("click", function (event) {
  var target = event.target; // 获取触发点击事件的元素
  var div1 = document.getElementById("dev1"); // 获取div元素
  // 检查点击的元素是否为div以外的其他地方
  if (!div1?.contains(target)) {
    // 如果是，执行需要的操作
    bus.emit("ShowUe", false);
  } else {
    bus.emit("ShowUe", true);
  }
});
onMounted(() => {
  dataInit();
});

watch(
  () => param.value,
  () => {
    dataInit();
  },
  { deep: true }
);
</script>

<style lang="scss" scoped>
.dev-panel-page {
  position: relative;
  .dev-info {
    position: absolute;
    right: calc(100% + 30px);
    top: 0;
  }
}
.Dev-frame {
  width: 100%;
  height: 100%;

  .frame {
    width: 90%;
    height: 85%;

    .Ranking {
      display: flex;
      justify-content: space-evenly;
      margin-bottom: 2.5%;
      height: 18%;
      width: 100%;

      // background-color: #fff;
      .top-frame {
        width: 79px;
        height: 38px;
        background: linear-gradient(
          -30deg,
          rgba(93, 171, 230, 0.34) 0%,
          rgba(0, 21, 46, 0.34) 100%
        );
        border: 1px solid #5291f0;
        font-size: calc(var(--fs) * 0.8);
        font-family: D, D-DIN-Italic;
        font-weight: normal;
        text-align: left;
        color: #b6d8ff;
        letter-spacing: 0.59px;
      }

      .active_top {
        border: 1px solid transparent;
        background: rgba(118, 154, 220, 0.18);
      }

      .top-name {
        margin-left: 5%;
        // display: flex;
        justify-content: space-between;
        align-items: center;

        .name {
          font-family: Adobe Heiti Std, Adobe Heiti Std-R;
          font-weight: normal;
          text-align: left;
          color: #839ecb;
          letter-spacing: 0.7px;
        }

        .num {
          font-size: calc(var(--fs) * 0.85);
          font-family: PingFang SC, PingFang SC-Medium;
          font-weight: 500;
          text-align: right;
          color: #1979bd;
          letter-spacing: 2.4px;
        }
      }
    }

    .line-frame {
      width: 100%;
      height: 4px;
      background: rgba(128, 164, 229, 0.2);

      .Top-line {
        width: 458px;
        height: 4px;
        opacity: 0.97;
        background: linear-gradient(
            0deg,
            rgba(3, 0, 0, 0.38) 0%,
            rgba(255, 255, 255, 0.38) 100%
          ),
          #4f8dff;
      }

      .dian {
        width: 5px;
        height: 5px;
        background: #b9cef7;
      }

      .active_line {
        opacity: 0.58;
        background: linear-gradient(
            0deg,
            rgba(3, 0, 0, 0.38) 0%,
            rgba(255, 255, 255, 0.38) 100%
          ),
          #82a1db;
      }
    }

    .pue-IT {
      width: 100%;
      justify-content: space-between;
      align-items: center;

      .PIname {
        font-size: calc(var(--fs) * 0.85);
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: 500;
        text-align: left;
        color: #a1d8fe;
        letter-spacing: 2.4px;
      }
    }
  }
}
</style>
